<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{width: 400px;height: 300px;border: solid 1px black;margin: 40px auto;position: relative;}
        .cont p{margin: 0;position: absolute;left: 0;height: 40px;top:130px;background: #55F;width: 0px;color: #fff;line-height: 40px;text-align: center}
        .box{position: fixed;left:0;top:0;bottom: 0;right:0;background: rgba(200,200,200,0.5);z-index: 9999999;display: none}
        .xbox{width: 500px;height: 140px;border: solid 1px black;box-shadow: 1px 1px 5px 5px #ccc;position: fixed;left:200px;top:100px;background: #fff;}
    </style>
</head>
<body style="height:3000px;">
    <h2>这是标题</h2>
    <div class="cont">
        <p><span></span></p>
    </div>
    <div class="box">
        <div class="xbox">
            <p>这是弹出的信息</p>
            <button>关闭</button>
        </div>
    </div>
</body>
<script>
    // 选择器
    const ocont = document.querySelector(".cont")
    const op = document.querySelector(".cont p")
    const ospan = document.querySelector(".cont span")
    const maxWidth = ocont.offsetWidth - 2;

    const obox = document.querySelector(".box")
    const oclose = document.querySelector(".box button")

    // 计时器
    let t;

    // 步长
    const speed = 9;

    // 点击事件
    ocont.onclick = function(){
        // 清除计时器
        clearInterval(t);
        // 开启计时器
        t = setInterval(() => {
            // 判断是否到终点：剩下的距离不够一步：目标 - 当前 < 步长
            if(maxWidth - op.offsetWidth < speed){
                clearInterval(t);
                // 强行设置到目标
                op.style.width = maxWidth + "px";
                ospan.innerHTML = "100%";
                // 进度条结束了
                obox.style.display = "block";
            }else{
                op.style.width = op.offsetWidth + speed + "px";
            }
            // 计算百分比
            ospan.innerHTML = Math.ceil(op.offsetWidth / maxWidth * 100) + "%"
        }, 30);
    }

    oclose.onclick = function(){
        obox.style.display = "none"
    }
</script>
</html>